<template>
    <el-dialog v-model="visible" title="新增采集数据" width="80%">
      <el-divider content-position="left">采集数据列表</el-divider>
  
      <div class="collect-table">
        <div class="table-header">
          <div class="col noise">噪音(dB)</div>
          <div class="col vibration">震动(mm/s)</div>
          <div class="col temp">温度(°C)</div>
          <div class="col current">电流(A)</div>
          <div class="col base">基础字段</div>
          <div class="col time">采集时间</div>
          <div class="col ops">操作</div>
        </div>
  
        <div v-for="(r, i) in rows" :key="r.uid" class="table-row">
          <div class="col noise">
            <el-input-number v-model="r.noise" :min="0" :max="200" controls-position="right" />
          </div>
          <div class="col vibration">
            <el-input-number v-model="r.vibration" :min="0" :max="50" controls-position="right" />
          </div>
          <div class="col temp">
            <el-input-number v-model="r.temperature" :min="-50" :max="200" controls-position="right" />
          </div>
          <div class="col current">
            <el-input-number v-model="r.current" :min="0" :max="500" controls-position="right" />
          </div>
          <div class="col base">
            <el-input v-model="r.baseField" placeholder="请输入基础字段" />
          </div>
          <div class="col time">
            <el-date-picker
              v-model="r.collectTime"
              type="datetime"
              placeholder="请选择时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
          <div class="col ops">
            <el-button link size="small" type="primary" @click="copyRow(i)">复制</el-button>
            <el-button link size="small" type="danger" @click="removeRow(i)">删除</el-button>
          </div>
        </div>
  
        <div class="add-btn">
          <el-button size="small" type="success" plain @click="addRow">＋ 新增一行</el-button>
        </div>
      </div>
  
      <template #footer>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, reactive } from "vue";
  import { ElMessage } from "element-plus";
  
  const visible = ref(false);
  const rows = reactive([]);
  
  function addRow() {
    rows.push({
      uid: Math.random().toString(36).slice(2),
      noise: null,
      vibration: null,
      temperature: null,
      current: null,
      baseField: "",
      collectTime: "",
    });
  }
  
  function copyRow(i) {
    const newRow = JSON.parse(JSON.stringify(rows[i]));
    newRow.uid = Math.random().toString(36).slice(2);
    rows.splice(i + 1, 0, newRow);
  }
  
  function removeRow(i) {
    rows.splice(i, 1);
  }
  
  const emit = defineEmits(["confirm"]);
  
  function confirm() {
    if (!rows.length) return ElMessage.error("请至少添加一条采集数据");
    emit("confirm", JSON.parse(JSON.stringify(rows)));
    visible.value = false;
  }
  
  const open = () => {
    visible.value = true;
    rows.splice(0);
    addRow();
  };
  defineExpose({ open });
  </script>
  
  <style scoped>
  .collect-table {
    border: 1px solid #ebeef5;
    border-radius: 8px;
  }
  .table-header,
  .table-row {
    display: grid;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    padding: 6px 8px;
    grid-template-columns: 10% 10% 10% 10% 20% 20% 10%;
  }
  .table-header {
    background: #f5f7fa;
    font-weight: 500;
  }
  .col {
    padding: 4px;
  }
  .col.ops {
    text-align: center;
  }
  .add-btn {
    text-align: right;
    padding: 8px;
  }
  </style>
  